<div class="toolbar"></div>
<div class="p-3">
    <div class="card mb-3">
        <h5 class="card-header">下拉按钮</h5>
        <div class="card-body">
            <p class="text-muted">1. 让一个按钮或其它元素可以唤起一个菜单面板，通常用在多项操作按钮上。
                <a href="https://www.cool1024.com/gitbook/DROP.html" target="_blank">参考文档</a>
            </p>
            <p class="text-muted">2. 自定义下拉菜单用于各种操作选择。</p>
            <p class="text-muted">3. 集成下拉，可以作为简单的下拉表单控件，选项不宜过多。</p>
        </div>
    </div>
    <div class="card mb-3">
        <div class="card-header bg-white">自定义下拉菜单</div>
        <div class="card-body">
            <div tsDropdown>
                <button tsToggle tsBtn class="dropdown-toggle mr-1">Default</button>
                <div tsDropMenu>
                    <button class="dropdown-item pointer">Item One</button>
                    <button class="dropdown-item pointer">Item Two</button>
                    <button class="dropdown-item pointer">Item Three</button>
                </div>
            </div>
            <div tsDropdown dropup>
                <button tsToggle tsBtn class="dropdown-toggle mr-1">Dropup</button>
                <div tsDropMenu>
                    <button class="dropdown-item pointer">Item One</button>
                    <button class="dropdown-item pointer">Item Two</button>
                    <button class="dropdown-item pointer">Item Three</button>
                </div>
            </div>
            <div tsDropdown>
                <button tsToggle tsBtn class="dropdown-toggle">Left</button>
                <div tsDropMenu [offsetX]="-57">
                    <button class="dropdown-item pointer">Item One</button>
                    <button class="dropdown-item pointer">Item Two</button>
                    <button class="dropdown-item pointer">Item Three</button>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header bg-white">集成下拉</div>
        <div class="card-body">
            <ts-dropdown [items]="dropdowns" [(value)]="dropdownValue" text="Select"></ts-dropdown>&nbsp;
            <ts-dropdown [items]="dropdowns" [(value)]="dropdownValue" text="Up" dropup></ts-dropdown>&nbsp;
            <ts-dropdown [items]="stringDropdowns" [(value)]="dropdownValue" [useNumber]="1" text="Number"></ts-dropdown>&nbsp;
            <ts-dropdown [items]="stringDropdowns" text="String"></ts-dropdown>&nbsp;
        </div>
    </div>
</div>